import React, { memo } from 'react';
import { useDispatch } from 'react-redux';
import { getCount, getSizeImage } from '../../tools/data_format';
import { getSongDetailAction } from '../player/store/actionCreators';

import { SongsCoverWrapper } from './style';

const SongsCover = memo((props) => {
    // state
    const { info } =props
    //Hooks
    const dispatch = useDispatch()
    // function
    const  playMusic = ()=>{
        dispatch(getSongDetailAction(info.id))
        console.log(info);    
    }
    return (
        <SongsCoverWrapper>
            <div className="cover-top" >
                <img src={getSizeImage(info.picUrl,140)} alt={info.name} />
                <div className="cover sprite_cover">
                    <div className="info sprite_cover">
                        <span>
                            <i className="sprite_icon erji "></i>
                            {getCount(info.playCount) }
                        </span>
                        <i className="sprite_icon play" onClick={e=>playMusic()}></i>
                    </div>
                </div>
            </div>
            <div className="cover-bottom text-nowrap">
                {info.name}
            </div>
            <div className="cover-source">
                by {info.copywriter || info.creator.nickname}
            </div>
        </SongsCoverWrapper>
    );
});

export default SongsCover;